<template>
  <v-layout title="创建/修改开票信息">
    <el-row type="flex" justify="center">
      <el-col :lg="12" :md="12" :sm="20" :xs="24">
        <v-form
          :form-title="formTitle"
          :form-data="formData"
          label-width="120px"
        >
          <template v-for="item in 5" slot-scope="props" :slot="'upload'+item">
            <uploadPdf
              :props="props"
              :show-upload="true"
              :show-del="true"
              :formData="formData"
              @read="readFile"
              @del="delFile"
            />
          </template>

        </v-form>
        <!--<el-form label-width="140px" size="mini">-->
          <!--<el-form-item label="其他汇款银行信息">-->
            <!--<template v-for="(item,index) in remit_bank">-->
              <!--<el-input v-model="item.name" @blur="inputBank(item)">-->

                <!--<template slot="append">-->
                  <!--<el-button v-if="index===0" icon="el-icon-plus" @click="addAddress"/>-->
                  <!--<el-button v-else icon="el-icon-minus" @click="delAddress(item,index)"/>-->
                <!--</template>-->
              <!--</el-input>-->
            <!--</template>-->

          <!--</el-form-item>-->
        <!--</el-form>-->
        <el-row type="flex" justify="end">
          <el-button type="primary" size="small">撤销修改</el-button>
          <el-button type="primary" size="small" @click="submit">提交</el-button>
        </el-row>
      </el-col>
    </el-row>

  </v-layout>
</template>

<script>
import uploadPdf from '@/views/components/uploadPdf'

export default {
  name: 'Modify',
  components: {
    uploadPdf
  },
  data() {
    return {
      id: '',
      formTitle: [
        {
          cn: '开票公司名称 ',
          en: '开票公司名称'
        },
        {
          cn: '纳税人识别号 ',
          en: '纳税人识别号'
        },
        {
          cn: '公司地址',
          en: '公司地址'
        },
        {
          cn: '电话 ',
          en: '电话'
        },
        {
          cn: '开户行 ',
          en: '开户行'
        },
        {
          cn: '账号 ',
          en: '帐号'
        },
        {
          cn: '发票类别',
          en: '发票类别',
          type: 'select',
          list: [
            {
              label: '专票',
              value: '1'
            },
            {
              label: '普票',
              value: '2'
            }
          ]
        },
        {
          cn: '开票内容: ',
          en: 'invoice_content',
          type: 'select',
          list: [
            {
              label: '广告费',
              value: '1'
            },
            {
              label: '广告发布费',
              value: '2'
            },
            {
              label: '信息服务费',
              value: '3'
            },
            {
              label: '信息技术服务费',
              value: '4'
            },
            {
              label: '服务费',
              value: '5'
            }
          ]
        },
        {
          cn: '营业执照 ',
          en: '营业执照',
          info: '营业**.pdf',
          type: 'upload1',
          url: 'https://tuitui.wxtt.cn/storage/image'
        },
        {
          cn: '开户许可 ',
          en: 'opening_permit',
          info: '开**可.pdf',
          type: 'upload2',
          url: 'https://tuitui.wxtt.cn/storage/image'
        },
        {
          cn: '纳税人证明 ',
          en: '一般纳税人证明',
          info: '纳税**明.pdf',
          type: 'upload3',
          url: 'https://tuitui.wxtt.cn/storage/upload'
        },
        {
          cn: '开票资料 ',
          en: 'invoice_infrom',
          info: '开**料.pdf',
          type: 'upload4',
          url: 'https://tuitui.wxtt.cn/storage/upload'
        }
      ],
      formData: {
        // 搜秀文化传播有限公司
      },
      showModel: false,
      previewUrl: '',

      remit_bank: [{}],
      companyList: []
    }
  },
  computed: {
    url() {
      if (this.id) {
        return 'action/InvoiceInformation/update'
      } else {
        return 'action/InvoiceInformation/found'
      }
    }
  },
  activated() {
    this.id = this.$route.query.id
    const details = this.$route.params.details
    if (!this.id) {
      localStorage.removeItem('details')
    }
    if (details) {
      localStorage.setItem('details', JSON.stringify(details))
    }

    this.formData = localStorage.getItem('details') ? JSON.parse(localStorage.getItem('details')) : {}
    // this.getBankInfo();
  },

  methods: {

    delAddress(item, index) {
      const data = item.id

      this.$post('url', data)
        .then(res => {

        })
      this.remit_bank.splice(index, 1)
    },

    // 上传文件
    myUpload(file, props) {
      // this.imageUrl = e.url;
      // console.log(file, props)
    },
    handleSuccess(res, file, props) {
      console.log(this.formData,props,'modify.props');
      // this.$set(this.formData,props,{})
      // let data = {
      //   name:file.name,
      //   url:res.url
      // }
      // this.$set(this.formData,props.info.en,JSON.stringify(data))
    },

    readFile(val) {
      console.log(val.info.en, this.formData[val.info.info])
      this.previewUrl = this.formData[val.info.en]
      this.showModel = true
    },

    delFile(props) {

      this.$set(this.formData,props.info.en,'')
    },

    submit() {
      const data = this.formData
      this.$post(this.url, data)
        .then(res => {
          if (this.id) {
            localStorage.setItem('details', JSON.stringify(data))
          }
          new Promise((resolve, reject) => {
            this.$message({
              message: res.msg,
              type: 'success'
            })
            resolve()
          }).then(_ => this.$router.go(-1))
        })
    },

    // getBankInfo() {
    //     let data;
    //     if (this.isEdit) {
    //         data = this.formData.name;
    //         this.$post('url', data)
    //             .then(res => {
    //                 this.remit_bank = res.data;
    //             })
    //     } else {
    //         this.remit_bank = [{}]
    //     }
    //
    // },

    inputBank(val) {
      if (val.id) {

      }
    },

    addAddress() {
      this.remit_bank.push({})
    }

  }
}
</script>

<style scoped>

</style>
